<template>
	<view class="video">
		<!-- <u-sticky bgColor="none"> -->
		<!-- bgColor="none" -->
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/19.png" mode="">
		</image>
		<view class="bgblur"></view>
		<view class="banner">
			<u-sticky bgColor="none">
				<view :class="[hasbg?'bgs1':'']">
					<view @click="searchList" class="search">
						<text>请输入关键字搜索</text>
						
						<div class="icon">
							<image class="imgs"
								src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/8.png" mode="">
							</image>
						</div>
					</view>
				</view>
			</u-sticky>
		</view>




		<!-- 推荐 -->
		<view class="todayPlay">
			<scroll-view scroll-x="true" class="bookshelf-content">
				<block v-for="(item, index) in 3" :key="index">
					<view class="item">
						<view class="img">
							<image
								:src="'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/'+(index+25)+'.png'"
								mode="">
							</image>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- tab -->
		
		
		
		
		
		
		<u-sticky offset-top="92" bgColor="none">
			<view :class="[hasbg?'bgs1':'']">
				<view  class="tabs">
					<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
						:active-item-style="ActiveStyle" inactive-color="#fff" :list="list" :current="current" @change="change">
					</u-tabs>
				</view>
			</view>
		</u-sticky>


		<view class="tabs1">
			<u-tabs height="50" bg-color="none" font-size="24" active-color="#A0F9FF" :bar-style="barSty1"
				:active-item-style="ActiveStyle1" inactive-color="#fff" :list="list1" :current="current1"
				@change="change1">
			</u-tabs>
		</view>


		<!-- </u-sticky> -->

		<view class="list">
			<view class="item" v-for="(item,index) in 4" @click="godetail">
				<view class="name">
					酒吧配音
				</view>
				<view class="bot">
					<view class="blur">

					</view>
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/24.png" mode="">
					</image>
				</view>
				<!-- <image src="" mode=""></image> -->
				<u-image width="100%" height="100%"
					:src="'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/'+(20+index)+'.png'"
					:lazy-load="true"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['scrollVal'],
		data() {
			return {
				hasbg: false,
				bgs: "#cccccc",
				current1: 0,
				list1: [{
					name: '上新',
				}, {
					name: '励志壁纸',
				}, {
					name: 'VIP专区'
				}, {
					name: '情侣姓氏'
				}, {
					name: '收款码'
				}, {
					name: '亲子全家福'
				}, {
					name: '女友'

				}],
				list: [{
					name: '推荐',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/17.png'
				}, {
					name: '最新',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/18.png'
				}, {
					name: 'VIP专区'
				}, {
					name: '星空'
				}, {
					name: '海边'
				}, {
					name: '春天的花花'
				}],
				current: 0,
				ActiveStyle: {
					fontSize: '32rpx',
				},
				ActiveStyle1: {
					fontSize: '24rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				barSty1: {
					width: '50rpx',
					height: '0',
					background: '#68C3C9'
				},
			}
		},

		watch: {
			scrollVal: {
				handler(e) {
					console.log(e, 8888);
					if (e >= 150) {
						this.hasbg = true
					} else {
						this.hasbg = false
					}
				},
				// immediate:true
			}
		},
		methods: {
			// 制作视频
			godetail(){
				
				uni.navigateTo({
					url: '/subpackFind/makeImgs'
				})
			},
			// 视频搜索
			searchList(){
				
				uni.navigateTo({
					url: '/subpackFind/search'
				})
			},
			change(index) {
				this.current = index;
			},
			change1(index) {
				this.current1 = index;
			},

		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-input__input{

		color: #FFFFFF;
	}
	.bgs1 {
		overflow: hidden;
		width: 100%;
		background: rgba(19, 20, 32, 1);
		z-index: 8;
	}

	.tabs1 {
		margin: 0 24rpx 24rpx;
		background: #1F2135;
		border-radius: 95rpx !important;
		padding-top: 8rpx;
	}

	.tabs {
		margin: 0 24rpx 12rpx;
	}

	.todayPlay {
		margin-left: 24rpx;
		margin-bottom: 24rpx;

		.bookshelf-content {
			white-space: nowrap; // 滚动必须加的属性
			width: 100%;
			height: 147upx;

			.item {
				width: 284upx;
				height: 147upx;
				margin-right: 24upx;
				display: inline-block;
				vertical-align: top;

				.img {
					display: inline-block;

					image {
						width: 284upx;
						height: 147upx;
						border-radius: 21upx;
					}
				}

			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin: 17rpx 24rpx;

		.item {
			position: relative;
			width: 339rpx;
			height: 516rpx;
			margin-bottom: 24rpx;
			border-radius: 12rpx;
			overflow: hidden;

			&:nth-child(2n+1) {
				margin-right: 24rpx;
			}


			.bot {
				position: absolute;
				width: 219rpx;
				height: 57rpx;
				bottom: 0;
				right: 0;
				z-index: 8;

				// background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/24.png") no-repeat;
				// background: 100% 100%;
				image {
					width: 219rpx;
					height: 57rpx;
					position: absolute;
					z-index: 8;
				}

				.blur {
					backdrop-filter: blur(8px);
					width: 219rpx;
					height: 57rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 6;
				}
			}

			.name {
				z-index: 8;
				position: absolute;
				padding: 10rpx 16rpx;
				// width: 115rpx;
				// height: 45rpx;
				background: rgba(0, 0, 0, 0.45);
				top: 16rpx;
				left: 0;
				font-size: 24rpx;
				font-family: PingFang HK, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0 30px 30px 0;
			}

		}
	}

	.bgs {
		width: 100%;
		height: 283rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: -1;
	}
	.bgblur {
		backdrop-filter: blur(8px);
		width: 330rpx;
		height: 92rpx;
		position: absolute;
		right: 50rpx;
		top: 86rpx;
		border-radius: 53rpx;
	}

	.banner {

		padding-top: 86rpx;

		.search {
			position: relative;
		

			padding-left: 48rpx;
			font-size: 28rpx;
			font-family: PingFang SC,
			PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			margin: 0 auto 30rpx;
			width: 702rpx;
			height: 92rpx;
			background: rgba(255, 255, 255, 0.06);
			border-radius: 53rpx;
		

			.icon {
				position: absolute;
				right: 0;
				top: 0;
			
				width: 92rpx;
				height: 92rpx;
				background: #8CC950;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				.imgs {
					width: 51rpx;
					height: 51rpx;
				}
			}
		}
	}
</style>
